<template>
	<view class="address  clearfix">
		<cu-custom bgColor="bg-white " isBack>
			<block slot="content">收货地址</block>
		</cu-custom>
		<view class="flex flex-direction address-box">
			<view class=" bg-white mt10" :class="{bt1:index==0}" v-for="(item, index) in addressList" :key="index">
				<view class=" flex flex-direction py15 px15"  @click="selectAddress(item)">
					<view class="flex align-center justify-between wp100 ">
						<text class="f14  ellipsis">{{ item.name }}</text>
						<text class="f14">{{ item.tel }}</text>
					</view>
					<view class="wp100 mt20">
						<text class="color-info lh16">{{ item.sheng }}{{ item.shi }}{{ item.xian }}{{ item.street }}</text>
					</view>
				</view>
				<view class="px15 py20 mt10 bt1 f14 color-info  flex align-center justify-between">
					<view class="flex align-center">
						<image src="/static/user/xuanze@2x.png"   v-if="item.isMoren == 1" class="block15" mode=""></image>
						<image src="/static/user/weixuan@2x.png" @click="moren(item,index)"  v-else class="block15" mode=""></image>
						<text class="ml10 " v-if="item.isMoren==1" style="color: #0ea391;">默认地址</text>
						<text class="ml10 text-black" @click="moren(item,index)" v-else>默认地址</text>
					</view>
					<view class="handle flex text-info">
						<view class="flex-text" @click="pushEditAddress(item)">
							<text class="cuIcon-edit f16"></text>
							<text class="ml5 ">编辑</text>
						</view>
						<view class="flex-text ml15" @click="deleteAddress(item,index)">
							<text class="cuIcon-delete f16"></text>
							<text class="ml5 ">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="discenter f16 text-white add-button" @click="pushAddAddress">添加地址</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	components: {},
	data() {
		return {
			type: '',
			addressList: [],
			page: 1,
			finish: false,
			defaultAddress: '',
			id:'',
			delid:'',
			addrFlags:0,
		}
	},
	computed: {
		...mapState(['isLoading','update'])
	},
	onLoad(e) {
		this.type=e.type
	},
	onShow() {
		this.clearData()
		this.getData()
		this.setUpdate(false)
	},
	onReachBottom() {
		this.getData()
	},
	onHide() {
		this.HideModal()
	},
	onUnload() {
		this.HideModal()
	},
	methods: {
		...mapActions(['setAddress', 'setUpdate']),
		clearData() {
			this.addressList = []
			this.page=1
			this.finish=false
		},
		
		async getData() {
			if (this.finish) return
			let {
				data
			} = await this.$http.post('user.address', { page: this.page,limit:20 })
			this.finish = data.length < 20
			!this.finish && (this.page += 1)
			this.addressList = [...this.addressList, ...data]
		},
		async moren(item,index){
			await this.$http.post('user.morenaddress', { id: item.id }, { tipConfig: { isSuccessTip: true } })
			this.clearData()
			this.getData()
		},
		selectAddress(item) {
			if (this.type == 'select') {
				this.setUpdate(true)
				this.setAddress(item)
				uni.navigateBack({
					delta: 1
				})
			}
		},
		pushEditAddress(item) {
			uni.navigateTo({
				url:'/pages/address/eaddress?id='+item.id+'&sheng='+item.sheng+'&shi='+item.shi+'&xian='+item.xian+'&street='+item.street+'&mobile='+item.tel+'&username='+item.name
			})
		},
		pushAddAddress() {
			uni.navigateTo({
				url:'/pages/address/addaddress'
			})
 
		},
		async deleteAddress(item) {
			if(item.isMoren==1){
				uni.showToast({
					title:'默认地址不能删除',
					icon:'none'
				})
				return false
			}
			await this.$http.post('user.deladdress', { id: item.id }, { tipConfig: { isSuccessTip: true } })
			this.clearData()
			this.getData()
		}
	}
}
</script>

<style lang="less">
.color-radiogreen {
	color: #3cb64d !important;
}
.bt1{
	border-top: 0.5px solid #F2F2F2;
}
.br1{
	border-right: 0.5px solid #F2F2F2;
}
.w-50{
	width: 50%;
}
.block12{
	width: 24rpx;
	height: 24rpx;
}
.add-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 96rpx;
	position: fixed; 
	bottom: 40rpx;
	background-color: #0ea391;
	border-radius: 10rpx;
}
.address-box{
	margin-bottom: 160rpx;
}
</style>
